<template>
	<view class="age" :style="'height:'+ screenHeight +'px !important;'">
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" title="年龄设置"  right-text="保存" @clickLeft="back" @clickRight="savejob"/>
		<view class="texthead" >
			<view >生日日期</view>
			<view class="textselect" @tap="open">
				<view class="dateSelect" v-show="isDisplay" >
					<text style="color: #9BA8B7;" >请选择</text>
					<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
				</view>
				<view class="date" v-show="!isDisplay">{{year}}年{{month}}月{{day}}日</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" >
			<view class="popupblock">
				<view class="popupClose" @tap="closePopup">取消</view>
				<view class="popupOK" @tap="okPopup">确定</view>
			</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
	    data: function () {
	        const date = new Date()
	        const years = []
	        const year = date.getFullYear()
	        const months = []
	        const month = date.getMonth() + 1
	        const days = []
	        const day = date.getDate()
	        for (let i = 1980; i <= date.getFullYear(); i++) {
	            years.push(i)
	        }
	        for (let i = 1; i <= 12; i++) {
	            months.push(i)
	        }
	        for (let i = 1; i <= 31; i++) {
	            days.push(i)
	        }
	        return {
				screenHeight: '',
	            title: 'picker-view',
				isDisplay:true,
	            years,
	            year,
	            months,
	            month,
	            days,
	            day,
	            value: [9999, month - 1, day - 1],
	            visible: true,
	            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
	        }
	    },
		onLoad() {
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
	    methods: {
	        bindChange: function (e) {
	            const val = e.detail.value
	            this.year = this.years[val[0]]
	            this.month = this.months[val[1]]
	            this.day = this.days[val[2]]
	        },
			open(){
				this.$refs.popup.open()
			},
			closePopup(){
				this.$refs.popup.close()
			},
			okPopup(){
				this.$refs.popup.close();
				this.isDisplay=false;
			},
			back(){
				uni.navigateTo({
					url:"./user/info"
				})
			},
	    }
	}
</script>

<style scoped lang="less">
	@import url("../../../static/color.less");
	.age{
		width: 100%;
		height: 100%;
		background-color: @colorLightGray;
	}
	.texthead{
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 30rpx;
	}
	picker-view {
	    width: 100%;
	    height: 600rpx;
	    margin-top:20rpx;
		background-color: #FFFFFF
	}
	.item {
	    line-height: 100rpx;
	    text-align: center;
	}
	
	.popupblock{
		background-color: #f5f5f5;
		position: relative;
		bottom: -20rpx;
		top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.popupblock view{
		padding: 30rpx 50rpx;
	}
	.popupClose{
		color: #aaaaaa;
	}
	.popupOK{
		color: #1676FE;
	}
	
</style>
